<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/master.css"/>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/dind-tab.css"/>
		
		
	</head>
	<body>
		
		<div class="container">
			<!-- header -->
			<header id="community-tit">
				<img src="img/top.png" class="zhuangtailan">
				<ul>
					<li>
						<a href="community-focus.html" class="community-focus">关注</a>
					</li>
					<li>
						<a href="community-find.html"  class="community-find community-spec">发现</a>
					</li>
					<li>
						<a href="search.html" class="iconfont icon-search"></a>
					</li>
				</ul>
			</header>
			<main id='find-main'>
				<div class="find-banner">
					<img src="img/love.png" >
					<img src="img/tuya.png" >
				</div>
				
				<div class="meet-tit"><em class="meet-left"></em>热门达人—人人都是艺术家</div>
				<div class="find-top">
					<div class="find-top-tit">
						<figure>
							<div class="find-pic-wrap">
								<img src="img/head%20(2).png" >
							</div>
							<a href="" class="find-guanzhu">+关注</a>
							<figcaption>
								
								<p>培培</p>
								<span>211赞</span><span>103粉丝</span><span>30作品</span>
								<br>
								<em>#水彩</em><em>#彩铅</em><em>#疯狂</em>
							</figcaption>
						</figure>
						
						<div class="shouhui">
							<div class="shouhui-wrap">
								<img src="img/手绘1.png" >
							</div>
							<div class="shouhui-wrap">
								<img src="img/手绘2.png" >
							</div>
							<div class="shouhui-wrap">
								<img src="img/手绘3.png" >
							</div>
							<div class="shouhui-wrap">
								<img src="img/手绘4.png" >
							</div>
							<div class="shouhui-wrap">
								<img src="img/手绘5.png" >
							</div>
						</div>
						
						
						
					</div>
					</div>
					<div class="tabs">
						
								<a href="#"  class="active">最新</a>
							
							
								<a href="#">猜你喜欢</a>
						
								<a href="#">水彩</a>
							
								<a href="#">彩铅</a>
							
								<a href="#">油画</a>
						
					</div>
					<div id="tabs-container" class="swiper-container">
						<div class="swiper-wrapper">
							
					<div class="swiper-slide">
					<div class="find-con" >
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>2
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>4
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>4
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>4
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>1
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>3
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>4
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						<figure>
							<div class="find-con-wrap">
								<img src="img/findp.png" >
							</div>
							<figcaption>
								<span>#水彩</span><span>#写意</span>5
								<br>
								<p><em><img src="img/图三.jpg" ></em><span>曾哥水彩</span><img src="img/观看.png" ><i>14.3w</i></p>
							</figcaption>
						</figure>
					</div>
					</div>
				</div>
			</div>	
			</main>
			
			<footer>
				
				<a href="index-rec.html">
										<span class="iconfont icon-shouye
				"></span>
										<p>首页</p>
									</a>
									
									<a href="meet.html">
										<span class="iconfont icon-tupian
				"></span>
										<p>遇见</p>
									</a>
									
									<a href="community-focus.html ">
										<span class="iconfont icon-shequ-weijihuo" style="color:#EEC14F ;"></span>
										<p  style="color:#EEC14F ;">社区</p>
									</a>
									
									<a href="selfcenter.html">
										<span class="iconfont icon-wode"></span>
										<p>我的</p>
									</a>
				</footer>
			</div>
			
			
			<script type="text/javascript">
				window.onload = function() {
					var tabsSwiper = new Swiper('#tabs-container', {
						speed: 500,
						on: {
							slideChangeTransitionStart: function() {
								$(".tabs .active").removeClass('active');
								$(".tabs a").eq(this.activeIndex).addClass('active');
							}
						}
					})
					$(".tabs a").on('click', function(e) {
						e.preventDefault()
						$(".tabs .active").removeClass('active')
						$(this).addClass('active')
						tabsSwiper.slideTo($(this).index())
					})
				}
			</script>
	</body>
</html>
